<template>
  <el-card style="margin-top: 20px">
    <template #header>
      <div class="card-header">
        <!-- <img src="../../assets/logo.png" style="width: 50px; height: 50px" /> -->
        <span>操作员列表</span>
      </div>
    </template>
    <el-row :gutter="10" >
      
         <el-input
          placeholder="请输入搜索姓名或账户名"
          v-model="searchContent" style="width:200px;margin-right:10px;"
        ></el-input
      > 
     
        <el-button type="primary" size="mini" @click="handlerSearch">搜索</el-button>
        <el-button type="primary" size="mini" @click="showAddAdminDialog">添加</el-button>
      
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="phone" label="手机" />
      <el-table-column prop="telephone" label="住宅电话" />
      <el-table-column prop="address" label="联系地址" />
      <el-table-column prop="username" label="账户名" />
        <el-table-column prop="userFace" label="头像" >
         <template  #default="scope">
          <img :src='scope.row.userFace' style="height:45px" />
        </template>
      </el-table-column>  
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="enabled" label="是否启用">
        <template #default="scope">
          <el-switch
            v-model="scope.row.enabled"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="enabledChange(scope.row.id)"
          >
          </el-switch>
          <!-- {{ scope.row.enabled == 1 ? "启用" : "禁用" }} -->
        </template>
      </el-table-column>
      <el-table-column prop="role" label="角色">
        <template #default="scope">
          <el-tag
            type="success"
            style="margin-right: 4px"
            v-for="(role, indexj) in scope.row.roles"
            :key="indexj"
          >
            <span v-if="role != null">{{ role.nameZh }}</span>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="250">
        <template #default="scope">
          <el-button
            size="mini"
            @click="handleRole(scope.$index, scope.row)"
            type="primary"
            >添加角色</el-button
          >
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            type="primary"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float: right; margin-top: 10px"
      :currentPage="currentPage"
      :page-size="10"
      :page-sizes="[10, 20, 100, 500]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </el-card>
  <AdminAdd
    :centerDialogVisible="centerDialogVisible"
    @onCloseDialog="closeDialogVisible()"
  ></AdminAdd>
  <AdminEdit
    v-if="editDialogVisible === true"
    ref="adminedit"
    :adminId="id"
    :editDialogVisible="editDialogVisible"
    @onEditCloseDialog="closeEditDialogVisible"
  ></AdminEdit>
  <AdminRole
    v-if="roleDialogVisible === true"
    ref="adminrole"
    :adminId="id"
    :adminName="adminName"
    :roleDialogVisible="roleDialogVisible"
    @onRoleCloseDialog="closeRoleDialogVisible"
  ></AdminRole>
</template>

<script>
import { reactive,toRefs,onMounted } from "vue"; 
import AdminAdd from "../../components/sys/admin/AdminAdd.vue";
import AdminEdit from "../../components/sys/admin/AdminEdit.vue";
import AdminRole from "../../components/sys/admin/AdminRole.vue";

import {useHandlerEdit,useHandleSizeChange,useHandleCurrentChange,useHandlerSearch,useDelete,loadData, getRequest} from '../../utils/api'
import {ElMessage} from 'element-plus'
 

function useHandlerRole(state){
  const handleRole=(index,row)=>{
        state.roleDialogVisible=true ;
        state.id = row.id ;
        state.adminName = row.name ;
  }
   return {handleRole}
}

export default {
   name: "SysAdmin",
  components: {
    AdminAdd,AdminEdit,AdminRole
  },
 
  // mounted(){
  //   this.$refs.adminedit.on('onEditCloseDialog',this.closeEditDialogVisible)
  // }
  // ,
  setup(props,{emit}){
    const baseUrl = "/system/admin/list/" ;
    const state = reactive({
      searchContent:'',
      tableData: [],
      centerDialogVisible:false,
      editDialogVisible:false ,
      roleDialogVisible:false,
      total:0,
      pageSize:10,
      currentPage:1,
      id:'',
      baseUrl,
      adminName:''
    });
    const enabledChange = (adminId)=>{
      getRequest('/system/admin/list/status',{adminId}).then(res=>{
        if(res){
            ElMessage.success({
                        type:"success",
                        title:'成功',
                        message:"操作成功",
                        duration:2000
                      });
        }
      })
    }
    const showAddAdminDialog=()=>{
      state.centerDialogVisible = true ;
    }

     const closeDialogVisible=(visible,data)=>{
        
      state.centerDialogVisible=false ;
       loadData(state,state.baseUrl)
    }
    
    const closeEditDialogVisible=(visible,data)=>{
      state.editDialogVisible=visible ;
       
      if(data!==undefined){
        loadData(state,state.baseUrl)
      }
    }
    const closeRoleDialogVisible=(visible,data)=>{
      state.roleDialogVisible=visible ;
      if(data!==undefined){
        loadData(state,state.baseUrl)
      }
    }
    const currentChange=(pageNo)=>{
      state.currentPage=pageNo;
      loadData(state,state.baseUrl);
    }
    onMounted(()=>{
      loadData(state,state.baseUrl);
    })
     return {
      ...toRefs(state), //解构响应式数据
      ...useDelete(state,baseUrl),
      ...useHandlerSearch(state,baseUrl),
      ...useHandlerEdit(state),
      ...useHandleSizeChange(state,baseUrl),
      ...useHandleCurrentChange(state,baseUrl),
      ...useHandlerRole(state),
      enabledChange,
      showAddAdminDialog,
      closeDialogVisible,
      closeEditDialogVisible,
      closeRoleDialogVisible,
      currentChange
    }
  }
};
</script>